<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no"
    />
    <title>表单事件</title>
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
    <script src="./js/utils.js"></script>
  </head>
  <body>
    <div class="box">
      <form action="http://www.baidu.com" method="post" enctype="multipart/form-data">
        <!-- 用户名 -->
        <div class="form-item">
          <label for="username">用户名称</label>
          <!--
            required:必须的不能空
            pattern: 用户名的验证规则是首字母，数字字母下划线组成6-12位，非空
            required pattern="[a-zA-Z]\w{5,11}"
          -->
          <input type="text" id="username" />
          <span class="valid">*</span>
        </div>
        <!-- 爱好 -->
        <div class="form-item">
          <label for="hobby">用户爱好</label>
          <input type="checkbox" class="hobby" name="hobby" value="Vue" />Vue
          <input type="checkbox" class="hobby" name="hobby" value="Augular" />Vue
          <input type="checkbox" class="hobby" name="hobby" value="React" />Vue
          <span class="hobby-msg valid">*</span>
        </div>
        <!-- 年龄 -->
        <div class="form-item">
          <label for="age">用户年龄</label>
          <select name="age" id="age">
            <option value="">--请选择年龄--</option>
            <option value="5">5</option>
            <option value="15">15</option>
            <option value="20">20</option>
            <option value="25">25</option>
            <option value="35">35</option>
          </select>
          <span class="valid">*</span>
        </div>
        <!-- 用户头像 -->
        <div class="form-item">
          <label for="pic">用户头像</label>
          <input type="file" name="pic" id="pic" />
          <span class="valid">*</span>
        </div>
        <!-- 用户邮箱-->
        <div class="form-item">
          <label for="email">用户邮箱</label>
          <input type="text" name="email" id="email" class="email" />
          <span class="valid">*</span>
        </div>
        <!-- 用户电话-->
        <div class="form-item">
          <label for="phone">用户电话</label>
          <input type="text" name="phone" id="phone" class="phone" />
          <span class="valid">*</span>
        </div>
        <!-- 用户密码 -->
        <div class="form-item">
          <label for="password">用户密码</label>
          <input type="text" name="password" id="password" class="password" />
          <span class="valid">*</span>
        </div>
        <!-- 重复密码 -->
        <div class="form-item">
          <label for="password">重复密码</label>
          <input type="text" name="repassword" id="repassword" class="repassword" />
          <span class="valid">*</span>
        </div>
        <!-- 随机验证 -->
        <div class="form-item">
          <label for="random">随机验证</label>
          <input type="text" name="randomNum" class="randomNum" style="width: 100px" disabled />
          <input type="text" name="random" id="random" class="random" style="width: 100px" />
          <span class="valid">*</span>
        </div>
        <!-- 验证生日 -->
        <div class="form-item">
          <label for="birthday">用户生日</label>
          <input type="date" name="birthday" id="birthday" class="birthday" />
          <span class="valid">*</span>
        </div>
        <div class="form-item">
          <input type="submit" />
          <input type="reset" />
        </div>
      </form>
      <script src="./js/form-event.js"></script>
    </div>
  </body>
</html>
